<script setup lang='tsx' name='Discover'>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { bannerApi } from '@/api'
import { toCurrRem } from '@/utils/rem';
import Charts from '@/views/base/discover/components/Charts.vue'
import Customized from '@/views/base/discover/components/Customized.vue'
import New from '@/views/base/discover/components/New.vue'
import Recommend from '@/views/base/discover/components/Recommend.vue'
import Singer from '@/views/base/discover/components/Singer.vue'
import SongSheet from '@/views/base/discover/components/SongSheet.vue'
defineOptions({
    components: { Charts, Customized, New, Recommend, Singer, SongSheet }
})
// const props = defineProps({})
// const emit = defineEmits([])
const tabList = reactive([
    {
        name: 'Recommend',
        tab: '个性推荐',
    },
    {
        name: 'Customized',
        tab: '专属定制',
    },
    {
        name: 'SongSheet',
        tab: '歌单',
    },
    {
        name: 'Charts',
        tab: '排行榜',
    },
    {
        name: 'Singer',
        tab: '歌手',
    },
    {
        name: 'New',
        tab: '最新音乐',
    },
])
const height = ref(0)
onMounted(() => {
    resizeH()
    window.addEventListener('resize', resizeH)
})
function resizeH() {
    height.value = (document.querySelector('.n-scrollbar-container') as HTMLElement).offsetHeight - 84
}
const remH = computed(() => toCurrRem(height.value))
</script>

<template>
    <div class='discover'>
        <n-tabs animated size="large">
            <n-tab-pane display-directive="show" v-for="tab in tabList" :key="tab.name" :name="tab.name" :tab="tab.tab">
                <div class="wrapper" :style="{ height: height + 'px', 'overflow-y': 'auto' }">
                    <component :is="tab.name"></component>
                </div>
            </n-tab-pane>
        </n-tabs>
    </div>
</template>
<style lang="scss" scoped>
.wrapper {
    // width: 1200px;

    &::-webkit-scrollbar {
        width: 0;
    }

    /* 隐藏水平滚动条 */
    &::-webkit-scrollbar {
        height: 0;
    }

    /* 隐藏滚动条的轨道 */
    &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
    }

    /* 隐藏滚动条的滑块 */
    &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0);
    }
}
</style>
<style lang='scss' scoped>
:deep(.n-tabs-bar) {
    background-color: #ec4141;
}

:deep(.n-tabs-tab.n-tabs-tab--active) {
    color: #ec4141 !important;
    font-weight: 700 !important;
}


:deep(.n-tabs-tab:hover) {
    color: #ec4141 !important;
}

:deep(.n-tabs-tab:hover .n-tabs-tab__label) {
    color: #ec4141;
}
</style>